<template>
  <div class="container">
    <van-nav-bar title="打款详情" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="inner">
        <div style="font-size:14px;color:#787D85">提现ID</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.id}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">申请提现人</div>
        <div
          style="font-size:14px;color:#020C1D;display:flex;align-items:center"
          @click="jumpShopName()"
        >
          {{PatmentInfo.shop_name}}
          <img
            src="../../../static/appimg/right.png"
            style="width:5px;height:8px;margin-left:6px;"
          />
        </div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">提现申请时间</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.withdraw_at}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">提现订单数量</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.orders_count}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">发展订单数量</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.orders_count}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">奖励订单数量</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.reward_count}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">提现金额</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.sum_commission}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">票据类型</div>
        <div
          style="font-size:14px;color:#020C1D;display:flex;align-items:center"
          @click="receiptModal = true"
        >
          {{PatmentInfo.invoice_info}}
          <img
            src="../../../static/appimg/right.png"
            style="width:5px;height:8px;margin-left:6px;"
          />
        </div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">扣除税点金额</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.tax_amount}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">实际支出金额</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.withdraw_amount}}</div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">打款状态</div>
        <div style="font-size:14px;color:#020C1D">
          <div v-if="PatmentInfo.status == 10" style="color:#249324;font-size:14px">已打款</div>
          <div v-if="PatmentInfo.status == 0" style="color:#FE3D3D;font-size:14px">待打款</div>
          <div
            v-if="PatmentInfo.status == 1"
            style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
          >
            <img
              src="../../../static/appimg/warn.png"
              alt
              style="width:18px;hieght:18px;margin-right:5px"
            />打款失败
          </div>
          <div v-if="PatmentInfo.status == 2" style="color:#FE3D3D;font-size:14px">打款中</div>

          <div
            v-if="PatmentInfo.status == 5"
            style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
          >
            <img
              src="../../../static/appimg/warn.png"
              alt
              style="width:18px;hieght:18px;margin-right:5px"
            />已驳回
          </div>
          <div v-if="PatmentInfo.status == 11" style="color:#FE3D3D;font-size:14px">已自动打款</div>
          <div v-if="PatmentInfo.status == 15" style="color:#FE3D3D;font-size:14px">自动打款失败</div>
        </div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">打款方式</div>
        <div style="font-size:14px;color:#020C1D">
          <div v-if="PatmentInfo.pay_way == 1">线下</div>
          <div v-if="PatmentInfo.pay_way == 2">云账户</div>
          <div v-if="PatmentInfo.pay_way == 3">支付宝</div>
          <div v-if="PatmentInfo.pay_way == 4">微信</div>
          <div v-if="PatmentInfo.pay_way == 5">工猫</div>
        </div>
      </div>
      <div class="inner">
        <div style="font-size:14px;color:#787D85">打款时间</div>
        <div style="font-size:14px;color:#020C1D">{{PatmentInfo.withdraw_at}}</div>
      </div>
    </div>
    <!-- 票据类型 -->
    <van-popup
      v-model="receiptModal"
      position="bottom"
      :style="{ height: '30%',borderRadius:'15px 15px 0 0',padding:'25px 15px' }"
    >
      <div
        v-if="PatmentInfo.invoice_way == 2"
        style="margin-bottom: 20px;font-size:15px"
      >物流公司：{{ PatmentInfo.track_company }}</div>
      <div
        v-if="PatmentInfo.invoice_way == 2"
        style="margin-bottom: 20px;font-size:15px"
      >单号：{{ PatmentInfo.track_no }}</div>
      <div v-if="PatmentInfo.invoice_way == 1" class="pdf">
        <a
          :href="PatmentInfo.invoice_img"
          target="_blank"
          style="color: rgb(0, 90, 255)"
        >{{ PatmentInfo.invoice_img }}</a>
      </div>
      <div v-if="PatmentInfo.invoice_way == 1" class="flexcc" style="margin: 20px 0">
        <el-button round plain type="primary" @click="down(PatmentInfo.invoice_img)">下载</el-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      PatmentInfo: {},
      shop_id: null,
      receiptModal: false
    };
  },
  created() {
    this.getPatmentInfo();
  },
  methods: {
    // 获取打款信息
    getPatmentInfo() {
      axios
        .get("/own/commission/withdrawinfo?id=" + this.$route.query.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.PatmentInfo = response.data.data.data;
            this.shop_id = this.PatmentInfo.shop_id;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    down(item) {
      window.location.href = item;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    jumpShopName() {
      this.$router.push({
        path: "/mine/detailInfo",
        query: { shop_id: this.shop_id }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: white;
  .content {
    width: 100%;
    padding: 0 15px;
    .inner {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eceff4;
      height: 48px;
    }
  }
  .pdf {
    width: 100%;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
/deep/ .van-nav-bar .van-icon {
  color: black;
}
/deep/ .van-nav-bar__content {
  background-color: #f6f6f6;
}
</style>